<template>
    <div>
        <el-dialog
            @close="baTable.form.extend!.showMatchTest = false"
            width="54%"
            :model-value="baTable.form.extend!.showMatchTest"
            class="ba-match-test-dialog"
            title="语料匹配测试"
            :destroy-on-close="true"
            top="4vh"
        >
            <el-alert title="本功能用于测试两句话的匹配度，以方便您配置知识库自动回复等" type="info" :closable="false" show-icon />
            <el-form ref="formRef" :model="state" :rules="rules" class="ba-match-test-form" label-position="top">
                <el-form-item label="语料一" prop="text1">
                    <el-input v-model="state.text1" :rows="2" type="textarea" />
                </el-form-item>
                <el-form-item label="语料二" prop="text2">
                    <el-input v-model="state.text2" :rows="2" type="textarea" />
                </el-form-item>
                <el-form-item label="匹配度">
                    <div class="ba-center w100">
                        <el-progress type="dashboard" :percentage="state.percentage" />
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="ba-center">
                    <el-button @click="baTable.form.extend!.showMatchTest = false">取消</el-button>
                    <el-button :loading="state.loading" :disabled="state.loading" v-blur @click="onSubmit()" type="primary"> 测试匹配度 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import { FormInstance } from 'element-plus'
import { match } from '/@/api/backend/kefu/index'

const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const state = reactive({
    text1: '',
    text2: '',
    loading: false,
    percentage: 0,
})

const rules = {
    text1: [buildValidatorData({ name: 'required', title: '语料一' })],
    text2: [buildValidatorData({ name: 'required', title: '语料二' })],
}

const onSubmit = () => {
    state.percentage = 0
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            state.loading = true
            match(state.text1, state.text2)
                .then((res) => {
                    state.percentage = res.data.match
                })
                .finally(() => {
                    state.loading = false
                })
        }
    })
}
</script>

<style scoped lang="scss">
:deep(.ba-match-test-dialog) {
    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 0;
        .ba-match-test-form {
            margin-top: 10px;
        }
    }
}
</style>
